<template>
  <div class="login-page">
    <h2 style="color: #000">智能健身衣管理平台</h2>
    <form class="login-form" @submit.prevent="handleLogin">
      <label>用户名：<input v-model="username" required /></label>
      <label>密码：<input type="password" v-model="password" required /></label>
      <label>角色：
        <select v-model="role">
          <option value="admin">管理员</option>
          <option value="manager">管理层</option>
          <option value="user">普通用户</option>
        </select>
      </label>
      <button type="submit">登录</button>
      <div v-if="error" class="error">{{ error }}</div>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const username = ref('')
const password = ref('')
const role = ref('manager')
const error = ref('')

const emit = defineEmits(['login'])

async function handleLogin() {
  if (username.value && password.value) {
    const loginData = {
      username: username.value,
      password: password.value,
      role: role.value
    };

    try {
      const response = await fetch('http://47.108.221.119:5000/weblogin', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(loginData)
      });

      if (!response.ok) {
        throw new Error('登录失败，请检查用户名或密码');
      }

      const data = await response.json();
      console.log('登录成功:', data);

      // ✅ 关键代码：触发 login 事件，通知父组件切换页面
      emit('login', { username: username.value, role: role.value });
      error.value = ''; // 清除错误信息

    } catch (err) {
      error.value = err.message;
    }
  } else {
    error.value = '请输入用户名和密码';
  }
}
</script>

<style scoped>
.login-page {
  max-width: 350px;
  margin: 60px auto;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  padding: 2rem 2.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
}

.login-form label {
  display: block;
  margin-bottom: 1.2rem;
  color: #000; /* 标签文字改为黑色 */
}

.login-form input, .login-form select {
  margin-left: 8px;
  padding: 0.5rem 0.8rem;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.1);
  width: 100%;
  box-sizing: border-box;
  color: #000; /* 输入框文字改为黑色 */
}

button {
  background: var(--theme-color, #786b56);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.5rem;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s;
  width: 100%;
  margin-top: 0.5rem;
}

button:hover {
  background: var(--theme-color, #7a7c7e);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.error {
  color: #ff5252;
  margin-top: 0.5rem;
  text-align: center;
}
</style>

<style>
body {
  /* 原渐变背景替换为图片 */
  background: url('../assets/login-bg.jpg') no-repeat center center fixed; /* 假设图片路径为 src/assets/login-bg.jpg */
  background-size: cover; /* 覆盖整个背景 */
  min-height: 100vh;
  margin: 0;
  padding: 0;

}
</style>